import { reactive } from "vue"
import { useStore } from "vuex"
import NetFunc from "./NetFunc"
import { useRouter } from "vue-router"
export default {
    template: `
    <div class="main">
    <div class="login">
    <div class="phone"><input type="text" placeholder="手机号" v-model="user.phone"></div>
    <div class="password"><input type="password" placeholder="密码" v-model="user.psw"></div>
    <button @click="TapReg">去注册</button>
    <button @click="TapLogin">登录</button>
    </div>
    <br>
    {{user.err}}
    </div>
    `,
    setup() {
        const user = reactive({ phone: '', psw: '',name:'',ava:'', err: '' })
        const router = useRouter()
        const store = useStore()
        const NF = new NetFunc()
        async function GetUser() {
            const url='http://localhost:3300/r/login?phone='+user.phone+'&password='+user.psw
            const opt = {
                phone: user.phone,
                password: user.psw,
            }
            const g = await NF.GetUrl(url)
            const msg=g.data.msg
            console.log('?',g)
            if(g.data)
            user.name=msg[0].username
            user.ava=msg[0].ava
        }
        function TapLogin() {
            if (user.phone.length !=11 || user.psw.length < 3) {
                user.err = '填写信息有误'
                return
            } else {
                GetUser()
            }
            console.log(user.name)
            setTimeout(function() {
                Commit();
            },1000);
        }
        function TapReg() {
            router.push({name:'Reg'})
        }
        function Commit(){
            store.commit('GetUser', user.name)
            store.commit('Getava', user.ava)
            store.commit('ChangeLogin', true)
            router.push({
                name: 'index'
            })
        }
        return { user, TapLogin,TapReg,GetUser,Commit }

    }
}
